@import '~/src/styles/colors.less';

.shoppingCarPage {
  background-color: #f7f8fa;
  min-height      : 100vh;
  padding-bottom  : env(safe-area-inset-bottom);
  font-size       : 0.85rem;

  .shoppingCarHeader {
    display        : flex;
    justify-content: space-between;
    margin-bottom  : 0.5rem;
    line-height    : 2rem;

    .headerItem {
      flex      : 0 0 4rem;
      text-align: center;
    }

    .save {
      color: #ED7D76
    }

    .edit {
      color: @purple100
    }
  }

  .shoppingCarBodyWarper {
    background-color: #fff;


    .selectedAll {
      padding      : 1rem;
      text-align   : left;
      margin-bottom: 3rem;

      .selectedAlltext {
        display : inline-block;
        margin  : 0 0.5rem;
        position: relative;
        top     : -0.2rem;
      }

      .shoppingCarCheckBox {
        margin-top: 0.5rem;
      }
    }
  }

  .shoppingCarCheckBox {
    border-radius: 50%;
    border       : 0.1rem solid #ccc;
    width        : 1rem;
    height       : 1rem;
    display      : inline-block;
  }

  .shoppingCarCheckBoxSelected {
    background-color: @purple100;
  }

  .shoppingCarCheckBoxNoSelected {
    background-color: #fff;
  }

  .shoppingCarFooter {
    position        : fixed;
    bottom          : 0;
    width           : 100vw;
    background-color: #fff;
    line-height     : 2.85rem;
    padding         : 1rem;
    display         : flex;

    .footerItem {
      flex    : 1;
      overflow: hidden;

      .price {
        color: @purple100;
      }

      .bottomButton {
        margin-right    : 1rem;
        width           : 53vw;
        border-radius   : 2rem;
        height          : 2.85rem;
        line-height     : 2.85rem;
        text-align      : center;
        font-weight     : 600;
        color           : #fff;
        background-color: @purple100;
      }

      .deleteButton {
        background-color: #fff;
        color           : #ED7D76;
        border          : 1px solid #ED7D76
      }
    }

    .left {
      flex: 0 0 40vw;
    }
  }
}